<template>
  <div class="result">
    <div class="search-wrap">
      <div class="home">
        <div class="logo-wrap" @click="handleClickLogo">
          <img src="../../assets/logo.jpg" alt="">
        </div>
        <el-autocomplete
          class="search"
          popper-class="popper"
          v-model="value"
          :fetch-suggestions="querySearch"
          placeholder="请输入标题或内容"
          :debounce="300"
          @select="handleClickItem"
          autofocus
          :trigger-on-focus="false"
          select-when-unmatched
        >
          <!-- clearable -->
          <!-- prefix-icon="el-icon-search" -->
          <template slot-scope="{ item }">
            <span v-html="item"></span>
          </template>
          <div slot="suffix" class="search-btn" @click="handleSearch">
            <i class="el-icon-search"></i>
          </div>
        </el-autocomplete>
      </div>
    </div>
    <div class="home active">
      <p class="result-stats">找到{{ total }}条结果（用时{{ takeTime / 1000 }}秒）</p>
      <div class="paper-wrap" ref="divider">
        <el-divider v-if="paperList.length"></el-divider>
        <div class="paper-item" v-for="(paper) in paperList" :key="paper.id">
          <h2 @click="handleClickPaper(paper.id)" class="title" v-html="join(paper.highight.title, paper.title)"></h2>
          <div>
            <span class="summary" v-html="join(paper.highight.summary, paper.summary)"></span>
            <span class="published-time">{{ formatDate(paper.publishedTime, 'yyyy-MM') }}</span>
            <el-divider direction="vertical"></el-divider>
            <span class="auther"><span v-for="(auther) in paper.authers" :key="auther">{{ auther + ' ' }}</span></span>
          </div>
        </div>
      </div>

      <el-pagination
        class="page"
        background
        hide-on-single-page
        :page-size="10"
        :total="total"
        :current-page.sync="pageIndex"
        @current-change="handleChangePage"
        v-loading.fullscreen.lock="loading"
      ></el-pagination>
    </div>
    
  </div>
</template>

<script>
import { searchTitle, search } from "../../api/v1/paperSearch";
import { debounce, join, formatDate, throttle } from "../../libs/tools";
export default {
  name: 'Result',
  data() {
    return {
      value: this.$route.query.search || '',
      searchList: [],
      pageIndex: 1,
      total: 0,
      paperList: [],
      loading: false,
      paper: {},
      takeTime: 0
    }
  },
  methods: {
    join,
    formatDate,
    handleSearch() {
      this.handleClickItem(this.value)
    },
    handleClickLogo() {
      this.$router.push('/')
    },
    querySearch(queryString, cb) {
      if (queryString === "" || queryString === undefined || queryString === null) {
        this.searchList = [];
        cb([])
        return;
      }
      searchTitle(queryString).then((res) => {
        if (res.status === 200 && Array.isArray(res.data)) {
          this.searchList = res.data;
          cb(this.searchList)
        }
      }).catch(e => {
        console.log(e)
      })
    },
    handleClickItem(value) {
      if(typeof value === 'object') {
        value = value.value
      }
      const str = value.replace(/<\/?.+?\/?>/g, '')
      this.value = str
      this.$router.push({ query: { search: value }})
      this.getPapers(str, this.pageIndex);
    },
    handleClickPaper(id) {
      let route = this.$router.resolve({
        path: '/detail/' + id
      })
      window.open(route.location.path, '_blank')
    },
    getPapers(keyword, pageIndex) {
      this.loading = true
      search(keyword, pageIndex).then((res) => {
        this.loading = false
        const data = res.data;
        if (res.status === 200 && data && Array.isArray(data.results)) {
          this.total = data.resultNumber;
          this.takeTime = data.takeTime
          this.paperList = data.results;
        }
      });
    },
    handleChangePage(pageIndex) {
      this.getPapers(this.value, pageIndex)
    }
  },
  created() {
    this.getPapers(this.value, 1)
  }
}
</script>

<style >
/* @import "../../assets/css/grid.css"; */

.result .search-div {
  position: relative;
  width: 100%;
}

.result .home.active {
  position: relative;
  /* margin-left: 200px; */
  margin: 0 auto;
  min-height: calc(100vh - 40px);
}

.result .logo-wrap {
  position: absolute;
  width: 200px;
  height: 40px;
  left: -230px;
  top: 50%;
  margin-top: -20px;
  /* top: ; */
  cursor: pointer;
}

.result .logo-wrap img {
  width: 100%;
  height: 100%;
  filter: grayscale(58%)
}

.result .search-wrap {
  display: flex;
  position: relative;
  height: 65px;
  /* border-bottom: 1px solid #ccc; */
  /* background-color: #0d4589; */
}

.result .search-wrap .home {
  position: relative;
  height: 100%;
  /* margin-left: 200px; */
  margin: 0 auto;
}

.result .search {
  position: absolute;
  width: 600px;
  /* right: 50%; */
  top: 50%;
  /* margin-left: -150px; */
  margin-top: -20px;
  border-radius: 20px;
  /* color: #fff; */
}

.result .search .search-btn {
  width: 50px;
  height: 40px;
  line-height: 40px;
  font-size: 22px;
  font-weight: 900;
  color: #0d4589;
  cursor: pointer;
  /* border-left: 1px solid #dfe1e5; */
  /* background-color: rgba(0, 0, 0, 0); */
  border-radius: 0 20px 20px 0;
  margin-right: -7px;
}


.result .home.active .result-stats {
  text-align: left;
  color: #70757a;
  font-size: 14px;
}
.result .home.active .paper-wrap {
  width: 100%;
}

.result .home.active .paper-wrap > .paper-item {
  margin-bottom: 28px;
  font-size: 14px;
  width: 100%;
  text-align: left;
  line-height: 1.2;
}

.result .home.active .paper-wrap > .paper-item .title {
  color: #1a0dab;
  font-size: 20px;
  margin: 0 0 7px;
  padding: 9px 0 0;
  font-weight: normal;
  cursor: pointer;
}

.result .home.active .paper-wrap > .paper-item .title:hover {
  text-decoration: underline;
}

.result .home.active .paper-wrap > .paper-item .published-time,
.result .home.active .paper-wrap > .paper-item .auther {
  display: inline-block;
  color: #70757a;
  margin-top: 7px;
}

.result .home.active .paper-wrap > .paper-item .summary {
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.result .search .el-input .el-input__inner {
  border-radius: 20px;
  box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
  /* border-color: rgba(223,225,229,0); */
  /* border: 2px solid #fff; */
  /* background-color: #0d4589; */
  /* color: rgb(196, 196, 196); */
  /* color: #fff; */
}

.result .home.active .page {
  margin-bottom: 50px;
}
</style>